{% extends 'marketing/base.html' %}
{% load static %}
{% load paginate %}
{% load common_tags %}
{% block content %}
{{ block.super }}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb mb-3">
    <li class="breadcrumb-item"><a href="{% url 'marketing:campaign_list' %}">Campaigns</a></li>
    <li class="breadcrumb-item active">{{ campaign.title }}</li>
  </ol>
</nav>
<div class="main_container ml-5 mr-5">
  <div class="row marl">
    <div class="col-md-12">
      <form id="add_form" method="POST" action='' novalidate>
        <div class="overview_form_block row justify-content-center">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="card-title text-right">
                  <span class="float-left">Campaign report</span>
                  <div class="date">
                    Sent on {{ campaign.sent_on_format }}
                    
                  </div>
                </div>
                <div class="campaign_det row marl">
                  <div class="col-md-12">
                    <div class="title"><b>Title:</b> <span class="content">{{ campaign.title }}</span> <span
                        class="icon"></span></div>
                    <div class="subject"><a href="#">Subject: <span class="content">{{ campaign.subject }}</span></a>
                      <span class="icon"></span></div>
                    <div class="recievers">
                      <b>To:</b> {% for contact_list in campaign.contact_lists.all %}<span class=""> <a
                          href="{% url 'marketing:contact_list_detail' contact_list.id %}"
                          style="text-decoration: underline;">{{ contact_list.name }}</a> </span>{% endfor %}
                    </div>
                    <div class="title"> <b>From Name:</b> <span class="content">{{ campaign.from_name }}</span>
                      <span class="icon"></span></div>
                    <div class="title"> <b> From Email: </b> <span class="content">{{ campaign.from_email }}</span>
                      <span class="icon"></span></div>
                    <div class="title"> <b>Reply To Email: </b><span
                        class="content">{{ campaign.reply_to_email }}</span>
                      <span class="icon"></span></div>
                  </div>
                </div>
                <div class="row marl count_status">
                  <div class="col-md-4">
                    <div class="well">
                      <span class="badge badge-success" style="font-size:16px;">Opened</span> <span
                        class="label">{{campaign.get_all_emails_contacts_opened}}</span>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="well">
                      <span class="badge badge-dark" style="font-size:16px;">Bounced</span> <span
                        class="label">{{campaign.get_all_email_bounces_count}}</span>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="well">
                      <span class="badge badge-secondary" style="font-size:16px;">Unsubscribed</span> <span
                        class="label">{{campaign.get_all_emails_unsubscribed_count}}</span>
                    </div>
                  </div>
                  <div class="col-md-12">
                    <div class="well">
                      <span class="badge badge-warning" style="font-size:16px;">Tags</span> <span
                        class="label">{{campaign.tags.all|length}}</span>
                      <div class="mt-3">
                        {% for tag in campaign.tags.all %}
                        <span class="text-left color{{forloop.counter}} tag_class_camp" id="list_tag"
                          data-link="{{tag.id}}" style="cursor: pointer;">{{tag.name}}</span>
                        {% empty %}
                        <span class="text-left">No Tags</span>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                  
                </div>
                {% with campaign.marketing_links.all as campaign_marketing_links %}
                {% if campaign_marketing_links|length > 0 %}
                <section class="table_det_section row marl">
                  <div class="col-md-12">
                    <div class="table_container_row no_mar_top">
                      <div class="card">
                        <div class="card-body">
                          <div class="card-title text-right">
                            <span class="float-left">Last Activity</span>
                            <a href="{% url 'marketing:download_links_clicked' campaign.id  %}"
                              class="primary_btn text-center"><i class="fas fa-download mar_right_0"></i></a>
                          </div>
                          <div class="table-responsive table-bordered">
                            <table class="table">
                              <thead>
                                <tr>
                                  <th width="45%">Link(url)</th>
                                  <th width="30%" class="text-center">Unique</th>
                                  <th width="10%" class="text-center">Total</th>
                                  
                                </tr>
                              </thead>
                              <tbody>
                                {% if per_page %}
                                {% paginate per_page campaign_marketing_links %}
                                {% else%}
                                {% paginate 10 campaign_marketing_links %}
                                {% endif %}
                                {% for link in campaign_marketing_links %}
                                <tr style="text-align:center;">
                                  <td scope="row"><a href="{{ link.original }}" class="anchor">{{ link.original }}</a>
                                  </td>
                                  <td class="text-center">{{ link.unique }}</td>
                                  <td class="text-center">{{ link.clicks }}</td>
                                  
                                </tr>
                                {% endfor %}
                              </tbody>
                            </table>
                          </div>
                        </div>
                        <div class="card-footer">
                          <div class="text-center row marl">
                            {% show_pages %}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                {% endif %}
                {% endwith %}
                {% if read_contacts %}
                <section class="table_det_section row marl">
                  <div class="col-md-12">
                    <div class="table_container_row no_mar_top">
                      <div class="card">
                        <div class="card-body">
                          <div class="card-title text-right">
                            <span class="float-left">Last 5 Opened</span>
                            <span>Click here to download all the opened contacts</span>
                            <a href="{% url 'marketing:download_contacts_for_campaign' campaign.id  %}?is_opened=true"
                              class="primary_btn text-center"><i class="fas fa-download mar_right_0"></i></a>
                          </div>
                          <div class="table-responsive table-bordered">
                            <table class="table">
                              <thead>
                                <tr>
                                  <th width="20%">Name</th>
                                  <th width="20%">Email</th>
                                  <th width="20%">List</th>
                                  <th width="20%">Date</th>
                                </tr>
                              </thead>
                              <tbody>
                                {% for contact in read_contacts|slice:"5" %}
                                <tr>
                                  <td scope="row"><a href="{% url 'marketing:contact_detail' contact.id %}"
                                      class="anchor">{{contact.name}}</a></td>
                                  <td><a href="{% url 'marketing:contact_detail' contact.id %}"
                                      class="anchor">{{contact.email}}</a></td>
                                  {% with contacts=contact.contact_list.all %}
                                  <td>
                                    {% for contact in contacts %}
                                    {% if contact in campaign.contact_lists.all %}
                                    <div>
                                      <a href="{% url 'marketing:contact_list_detail' contact.id %}"
                                        class="anchor">{{contact.name}} </a>
                                    </div>
                                    {% endif %}
                                    {% endfor %}
                                  </td>
                                  {% endwith %}
                                  
                                  <td> {{contact.created_on}}</td>
                                </tr>
                                {% endfor %}
                              </tbody>
                            </table>
                            {% if read_contacts|length == 0 %}
                            No Contacts
                            {% endif %}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                {% endif %}
                {% if unsubscribe_contacts %}
                <section class="table_det_section row marl">
                  <div class="col-md-12">
                    <div class="table_container_row no_mar_top">
                      <div class="card">
                        <div class="card-body">
                          <div class="card-title text-right">
                            <span class="float-left">Last 5 Unsubscribed</span>
                            <span>Click here to download all the unsubscribed contacts</span>
                            <a href="{% url 'marketing:download_contacts_for_campaign' campaign.id  %}?is_unsubscribed=true"
                              title="download bounced contacts" class="primary_btn text-center"><i
                                class="fas fa-download mar_right_0"></i></a>
                          </div>
                          <div class="table-responsive table-bordered">
                            <table class="table">
                              {% if unsubscribe_contacts %}
                              <thead>
                                <tr>
                                  <th width="20%">Name</th>
                                  <th width="20%">Email</th>
                                  <th width="20%">List</th>
                                  <th width="20%">Date</th>
                                </tr>
                              </thead>
                              <tbody>
                                {% for contact in unsubscribe_contacts|slice:"5"  %}
                                <tr>
                                  <td scope="row"><a href="{% url 'marketing:contact_detail' contact.id %}"
                                      class="anchor">{{contact.name}}</a></td>
                                  <td><a href="#" class="anchor">{{contact.email}}</a></td>
                                  {% with contacts=contact.contact_list.all %}
                                  <td>
                                    {% for contact in contacts %}
                                    {% if contact in campaign.contact_lists.all %}
                                    <div>
                                      <a href="{% url 'marketing:contact_list_detail' contact.id %}"
                                        class="anchor">{{contact.name}}</a>
                                    </div>
                                    {% endif %}
                                    {% endfor %}
                                  </td>
                                  {% endwith %}
                                  <td>
                                    {{contact.updated_on}}
                                  </td>
                                </tr>
                                {% endfor %}
                                {% else %}
                                No Contacts
                                {% endif %}
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                {% endif %}
                {% if bounced_contacts %}
                <section class="table_det_section row marl">
                  <div class="col-md-12">
                    <div class="table_container_row no_mar_top">
                      <div class="card">
                        <div class="card-body">
                          <div class="card-title text-right">
                            <span class="float-left">Last 5 Bounced</span>
                            <span>Click here to download all the bounced contacts</span>
                            <a href="{% url 'marketing:download_contacts_for_campaign' campaign.id  %}?is_bounced=true"
                              title="download bounced contacts" class="primary_btn text-center"><i
                                class="fas fa-download mar_right_0"></i></a>
                          </div>
                          <div class="table-responsive table-bordered">
                            <table class="table">
                              {% if bounced_contacts %}
                              <thead>
                                <tr>
                                  <th width="20%">Name</th>
                                  <th width="20%">Email</th>
                                  <th width="20%">List</th>
                                  <th width="20%">Date</th>
                                </tr>
                              </thead>
                              <tbody>
                                {% for contact in bounced_contacts|slice:"5" %}

                                <tr>
                                  <td scope="row"><a href="{% url 'marketing:contact_detail' contact.id %}"
                                      class="anchor">{{contact.name}}</a></td>
                                  <td><a href="{% url 'marketing:contact_detail' contact.id %}"
                                      class="anchor">{{contact.email}}</a></td>
                                  {% with contacts=contact.contact_list.all %}
                                  <td>
                                    {% for contact in contacts %}
                                    {% if contact in campaign.contact_lists.all %}
                                    <div>
                                      <a href="{% url 'marketing:contact_list_detail' contact.id %}"
                                        class="anchor">{{contact.name}}</a>
                                    </div>
                                    {% endif %}
                                    {% endfor %}
                                  </td>
                                  {% endwith %}
                                  <td>
                                    {{contact.updated_on}}
                                  </td>
                                </tr>
                                {% endfor %}
                                
                              </tbody>
                              {% else %}
                              No Contacts
                              {% endif %}
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                {% endif %}
                
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}
{% block js_block %}
<script>
  $(".tag_class_camp").click(function (e) {
    e.preventDefault()
    // $(".tag_class_opp").css('cursor', 'pointer')
    url = "{% url 'marketing:campaign_list' %}"
    url = url + "?tag=" + $(this).attr('data-link')
    window.location.href = url;
  });
  var quill = new Quill('#editor-container', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block']
      ]
    },
    placeholder: 'Compose an epic...',
    theme: 'snow' // or 'bubble'
  });
  $('form').submit(function () {
    alert($(this["options"]).val());
    return false;
  });
</script>
{% endblock js_block %}